<!-- 搜索导航条 -->
<template>
    <div class="serach">
        <div class="top">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button> 重置 </el-button>
                <el-button type="primary"> 查询搜索 </el-button>
            </div>
        </div>
        <div class="bottom">
            <span>活动名称：</span>
            <el-input v-model="input" placeholder="输入框的内容需要动态绑定" clearable />

        </div>
    </div>

</template>

<script setup lang="ts">
import {
    Search
} from '@element-plus/icons-vue';
import { ref } from 'vue'
const input = ref('')
console.log(input);

</script>

<style lang="less" scoped>
.serach {
    height: 100px;
    padding: 20px;
    border: 1px solid #eee;

    .top {
        display: flex;
        height: 50px;
        // border: 1px solid #000;
        align-items: center;
        justify-content: space-between;

    }

    .bottom {
        display: flex;
        margin-left: 50px;

        .el-input {
            height: 32px;
            line-height: 32px;
            width: 200px;
        }
    }
}
</style>